<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>仿京东显示隐藏密码</title>
  <style>
    .box {
      position: relative;
      width: 400px;
      border-bottom: 1px solid #ccc;
      margin: 100px auto;
    }

    .box input {
      width: 370px;
      height: 30px;
      border: 0;
      outline: none;
    }

    .box img {
      position: absolute;
      top: 2px;
      right: 2px;
      width: 24px;
    }
  </style>
</head>
<body>
  <div class="box">
    <label for="pwd">
      <img src="images/close.png" alt="" id="eye">
    </label>
    <input type="password" name="" id="pwd">
  </div>
  <script>
    // 1. 获取元素
    var eye = document.getElementById('eye')
    var pwd = document.getElementById('pwd')
    // 2. 注册事件 处理程序
    // var flag = 0
    eye.onclick = function () {
      // 点击一次之后， flag 一定要变化
      // if (flag === 0) {
      //   pwd.type = 'text'
      //   eye.src = 'images/open.png'
      //   flag = 1 // 赋值操作
      // } else {
      //   pwd.type = 'password'
      //   eye.src = 'images/close.png'
      //   flag = 0
      // }
      pwd.type = pwd.type === 'text' ? 'password' : 'text'
      if (pwd.type === 'password') {
        eye.src = 'images/close.png'
      } else {
        eye.src = 'images/open.png'
      }
    }
  </script>
</body>
</html>